<template>
  <div class="supply-setting">
    <Breadcrumb :pathContent="content" />
    <div class="supply-content">
      <el-form>
        <el-form-item>
          <el-dropdown trigger="click"
            @command="dropdownStateChange">
            <span class="el-dropdown-link">
              {{dropdownValue}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{key : 'state', value: null, title: '全部状态' }">
                全部状态
              </el-dropdown-item>
              <el-dropdown-item :command="{key : 'state', value: 0, title: '启用' }">
                启用
              </el-dropdown-item>
              <el-dropdown-item :command="{key : 'state', value: 1, title: '停用' }">
                停用
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown trigger="click"
            @command="dropdownStateChange">
            <span class="el-dropdown-link">
              {{clearingMethod}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{key : 'settlementType', value: null, title: '全部方式' }">
                全部方式
              </el-dropdown-item>
              <el-dropdown-item :command="{key : 'settlementType', value: 0, title: '日结' }">
                日结
              </el-dropdown-item>
              <el-dropdown-item :command="{key : 'settlementType', value: 1, title: '周结' }">
                周结
              </el-dropdown-item>
              <el-dropdown-item :command="{key : 'settlementType', value: 2, title: '月结' }">
                月结
              </el-dropdown-item>
              <el-dropdown-item :command="{key : 'settlementType', value: 3, title: '半月结' }">
                半月结
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown trigger="click"
            @command="dropdownStateChange">
            <span class="el-dropdown-link">
              {{enterpriseType}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{key : 'supplierType', value: null, title: '全部类型' }">
                全部类型
              </el-dropdown-item>
              <el-dropdown-item :command="{key : 'supplierType', value: 0, title: '企业' }">
                企业
              </el-dropdown-item>
              <el-dropdown-item :command="{key : 'supplierType', value: 1, title: '旅行社' }">
                旅行社
              </el-dropdown-item>
              <el-dropdown-item :command="{key : 'supplierType', value: 2, title: '酒店' }">
                酒店
              </el-dropdown-item>
              <el-dropdown-item :command="{key : 'supplierType', value: 3, title: '第三方' }">
                第三方
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown @command="setMode">
            <span class="el-dropdown-link">
              {{modeStr}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{key : '', value: null, title: '全部合作模式' }">
                全部合作模式
              </el-dropdown-item>
              <el-dropdown-item :command="{ value: item.id, title: item.name }"
                v-for="item in modeList"
                :key="item.id">
                {{item.name}}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div>
            <el-input placeholder="请输入供应商/联系人"
              type="text"
              @keyup.enter="handleSearch"
              v-model="searchKey"
              style="width:300px;margin-right:20px"
              clearable>
            </el-input>
          </div>
          <div>
            <el-input placeholder="请输入关联酒店名称" v-model="hotelName" clearable style="width:300px;"></el-input>
          </div>
          <div class="search-button">
            <el-button type="primary"
              icon="el-icon-search"
              @click="handleSearch"></el-button>
          </div>
          <el-button type="primary"
            size="small"
            style="float: right;"
            @click="addSuppliers"
            v-if="addsupplier">新增供应商</el-button>
        </el-form-item>
        <el-form-item>
          <el-table :data="tableData"
            style="width: 100%"
            min-height="250"
            max-height="600">
            <el-table-column prop="company" width="200"
              label="供应商名称">
            </el-table-column>
            <el-table-column prop="type"
              label="公司类型">
            </el-table-column>
            <el-table-column prop="mode"
              label="合作模式">
            </el-table-column>
             <el-table-column prop="hotels" width="300"
              label="关联酒店">
            </el-table-column>
            <el-table-column prop="superiorCompany"
              label="上级供应商名称">
            </el-table-column>
            <el-table-column prop="userName"
              label="联系人">
            </el-table-column>
            <el-table-column prop="userPhone"
              label="联系人电话">
            </el-table-column>

            <el-table-column prop="clearingMode"
              label="结算方式">
            </el-table-column>
            <el-table-column prop="clearingTime"
              label="结算时间">
            </el-table-column>
            <el-table-column prop="state"
              label="状态">
            </el-table-column>
            <el-table-column label="操作" width="300">
              <template slot-scope="scope">
                <el-button @click.native.prevent="handleStateClick(scope.row)"
                  type="text"
                  v-if="updatesupplierstate"
                  size="small">
                  {{scope.row.state === "停用"? "启用":"停用"}}
                </el-button>
                <el-button @click.native.prevent="editSuppliers(scope.row.id)"
                  type="text"
                  v-if="updatesupplier"
                  size="small">
                  修改
                </el-button>
                <el-button v-if="scope.row.typeId ==3 || scope.row.typeId ==2"
                  @click.native.prevent="policy(scope.row.typeId,scope.row.id)"
                  type="text"
                  size="small">
                  销售政策
                </el-button>
                <el-button type="text"
                  @click="viewSale(scope.row.id)">营业查询</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item style="margin-top: 20px;">
          <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, prev , pager , next, sizes, jumper"
            :total="total">
          </el-pagination>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {
  getSuppliersList,
  updateSuppliersState
} from "../../public/js/setting";
import { getModeList } from "@/public/js/mode";
const Breadcrumb = () => import("@/components/common/Breadcrumb");
export default {
  name: "Staff",
  data() {
    return {
      clearingMethod: "结算方式",
      enterpriseType: "公司类型",
      dropdownValue: "全部状态",
      modeStr: "全部合作模式",
      content: {
        firstTitle: "系统设置",
        secondTitle: "供应设置",
        type: "close"
      },
      showDepartment: false,
      select: "",
      tableData: [],
      sendData: {},
      pageSize: 10,
      pageNum: 1,
      total: 0,
      stateData: null,
      state: null,
      settlementType: null,
      searchKey: null,
      buttonText: [],
      id: null,
      text: "",
      modeId: "",
      modeList: [],
      hotelName:''
    };
  },
  created() {
    this.getSuppliersLists();
    this._getModeList();
    window.commo.showMenu(this);
  },
  mounted() {
    window.bus.$on("showDepartment", val => {
      this.showDepartment = val;
    });
  },
  methods: {
    //获取合作模式列表
    _getModeList() {
      getModeList().then(res => {
        this.modeList = res.data.modes;
        console.log(res);
      });
    },
     // 营业额查询
    viewSale(id) {
      this.$router.push({ path: `/index/turnover-enquiry?id=${id}` });
    },
    //合作模式查询
    setMode(mode) {
      (this.modeId = mode.value), (this.modeStr = mode.title);
      this.pageSize = 10;
      this.pageNum = 1;
      this.getSuppliersLists();
    },
    // 销售政策
    policy(typeId, id) {
      if (typeId == 2) {
        this.$router.push({ path: `/index/hotelSellPolicy?id=${id}` });
      } else {
        this.$router.push({ path: `/index/thirdSellPolicy?id=${id}` });
      }
      //
    },
    getSuppliersLists() {
      getSuppliersList({
         pageSize:this.pageSize,
        pageNum: this.pageNum,
        state: this.state,
        settlementType: this.settlementType,
        searchKey: this.searchKey,
        type: this.supplierType,
        modeId:this.modeId,
        hotelName:this.hotelName 
      }).then(res => {
        this.tableData = res.data.suppliersMiniEntities;
        this.total = res.data.total;
      });
    },
    handleSearch() {
      this.getSuppliersLists();
    },
    dropdownStateChange(data) {
      if (data.key === "state") {
        this.state = data.value;
        this.dropdownValue = data.title;
      } else if (data.key === "settlementType") {
        this.settlementType = data.value;
        this.clearingMethod = data.title;
      } else {
        this.supplierType = data.value;
        this.enterpriseType = data.title;
      }
      this.getSuppliersLists();
    },
    addSuppliers() {
      this.$router.push("/index/add_suppliers");
    },
    setHotelStates(row) {
      let state = row.state === "停用" ? "0" : "1";
      let stateData = {
        timestamp: 0,
        version: "string",
        operation: "string",
        state: state,
        id: row.id
      };
      updateSuppliersState(stateData).then(res => {
        console.log(res);
        if (!res.data.errCode) {
          this.$message.success("修改成功");
          row.state = row.state === "停用" ? "启用" : "停用";
        } else {
          this.$message.error(res.data.errMsg);
        }
      });
    },
    // 格式化状态
    stateFormat(row, column) {
      console.log(row);
      let state = row[column.property];
      return state === "启用" ? "启用" : "停用";
    },
    // 修改状态
    handleStateClick(row) {
      console.log(row);
      // console.log(row.state = 0)
      this.$confirm("此操作将启用该供应商, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.setHotelStates(row);
        })
        .catch(() => {});
    },
    editSuppliers(id) {
      this.$router.push("/index/add_suppliers?id="+id)
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getSuppliersLists();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getSuppliersLists();
    }
  },
  components: {
    Breadcrumb
  }
};
</script>
<style lang="scss" scoped>
.supply-content {
  margin-top: 20px;
  background-color: white;
  padding: 20px;
  position: relative;
}
.supply-setting .supply-content .el-form .el-form-item .el-form-item__content {
  line-height: 2;
}
.search-button {
  margin-left: 20px;
  float: left;
  .el-button {
    padding: 9px 20px;
  }
}
.el-dropdown {
  float: left;
  margin-right: 30px;
}
.el-input {
  float: left;
  width: 400px;
  input {
    height: 34px;
    line-height: 34px;
  }
}
</style>
